
<script setup>

import { computed } from 'vue';
const emit = defineEmits(['update:page', 'update:size', 'pagination'])

const props = defineProps({
	total: {
		required: true,
		type: Number
	},
	page: {
		type: [Number, String],
		default: 1
	},
	size: {
		type: [Number, String],
		default: 20
	},
	sizeOptions: {
		type: Array,
		default() {
			return [10, 15, 20, 30, 50]
		}
	},
	layout: {
		type: String,
		default: 'total, sizes, prev, pager, next, jumper'
	}
});

const currentPage = computed({
	get: () => parseInt(props.page),
	set(value) {
		emit('update:page', value)
	}
})

const pageSize = computed({
	get: () => parseInt(props.size),
	set(value) {
		emit('update:size', value)
	}
})

const handleSizeChange = function (val) {
	emit('pagination', { page: 1, size: val })
}
const handleCurrentChange = function (val) {
	emit('pagination', { page: val, size: pageSize.value })
}

</script>

<template>
	<div class="list-pagination">
		<div v-if="$slots['prefix']" class="pagination-prefix">
			<slot name="prefix" />
		</div>
		<el-pagination class="pagination-main" v-show="props.total > 0" :current-page.sync="currentPage"
			:page-size.sync="pageSize" :layout="props.layout" :page-sizes="sizeOptions" :total="props.total" prev-text="上一页"
			next-text="下一页" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
		<div v-if="$slots['suffix']" class="pagination-suffix">
			<slot name="suffix" />
		</div>
	</div>
</template>

<style scoped lang="scss">
.list-pagination {
	display: flex;

	.pagination-prefix {
		margin-right: 10px;
	}

	.pagination-suffix {
		margin-left: 10px;
	}
}
</style>
